{% extends "base.html" %}
{% load common_filters %}
{% load static %}

{% block title %}
    Couse Home | {{ block.super }}
{% endblock title %}

{% block stylesheets %}
    {{ block.super }}
    <!-- Custom styles for this template -->
    <link href="{% static "laioffer/css/dashboard.css" %}" rel="stylesheet">
    <link href="{% static "hljs/default.min.css" %}" rel="stylesheet">
    <script type="text/javascript" src="{% static "hljs/highlight.min.js" %}"></script>
    <script type="text/javascript" src="{% static "codemirror/lib/codemirror.js" %}"></script>
    <link rel="stylesheet" href="{% static "codemirror/lib/codemirror.css" %}">
    <script type="text/javascript" src="{% static "codemirror/mode/python.js" %}"></script>
    <link rel="stylesheet" href="{% static "css/laioffer/inline_comment.css" %}">
{% endblock stylesheets %}

{% block content %}

    {% include "_student_sidebar.html" %}

    <section id="main-content">
        <section class="wrapper">

            <!-- 直播网址:<a href="{{ exam.course.course_teach_url }}">{{ exam.course.course_teach_url }}</a> -->

            <div class="exam">
                <div id="exam-contents">

                    {% include "_message.html" %}

                    {% if not exam.started %}
                        <div class="well">
                            <h2>exam has not started yet, wait for teacher's input.</h2>
                        </div>
                    {% else %}

                        {% with exam_paper=exam|get_exam_paper:request.user.id %}
                        {% if exam_paper.total_score %}
                            <h3>Total score: {{ exam_paper.total_score }}</h3>
                            <h3>Total comment</h3>
                            {{ exam_paper.comment }}
                        {% endif %}
                        {% endwith %}


                        {% for problem in exam.problems.all %}
                            <div class="exambor">

                                <div class="rows">

                                    <div class="col1">

                                        <div data-id="{{ content.id }}">
                                            {% autoescape off %}
                                            <div class="show-exam-info box1">
                                                <div class="show-exam-info1">START TIME:{{ problem.start }}</div>
                                                <div class="show-exam-info1">DURATIONS:{{ problem.minutes }} mins</div>
                                                <div class="show-exam-info1">FULL MARKS: {{ problem.full_marks }}
                                                    scores
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form1 box2">
                                            {{ problem.formatted_markdown }}
                                        </div>
                                        {% endautoescape %}
                                        <!--end box2-->
                                    </div><!--end col1-->


                                    {% with answer=problem|get_answer:request.user.id %}
                                    <div class="form1 col2">
                                        <header class="panel-heading">ANSWER AREA</header>
                                        {% if is_exam_ended %}
                                            <pre id="answer-{{ answer.id }}" js-answer="{{ answer.id }}"
                                                 js-commenter="{{ request.user.id }}" js-is_amendment="false"
                                                 class="answer prettyprint linenums">{{ answer.content }}</pre>
                                        {% else %}
                                            <form class="js-content" action="{% url "exam:student" exam.id %}"
                                                  method="POST"
                                                  ajax-answer-id="{{ answer.id }}" data-start-time="{{ problem.start }}"
                                                  data-duration="{{ problem.minutes }}">
                                                {% csrf_token %}
                                                <textarea class="answers" name="content">{{ answer.content }}</textarea>
                                                <input type="hidden" name="answer_pk" value="{{ answer.pk }}">
                                                <button class="btn btn-default btn-bottom" type="submit">Update</button>
                                                <label class="hint"></label>
                                            </form>
                                        {% endif %}
                                    </div>
                                    <!--endcol-col2-->

                                </div><!--end rows-->

                                <div class="form1">
                                    <header class="panel-heading">Modify area</header>
                                    {% if is_exam_ended %}
                                        <pre id="amendment-{{ answer.id }}" js-answer="{{ answer.id }}"
                                             js-commenter="{{ request.user.id }}" js-is_amendment="true"
                                             class="prettyprint linenums">{{ answer.amendment }}</pre>
                                    {% else %}
                                        <form class="js-amendment" action="{% url "exam:student" exam.id %}"
                                              method="POST"
                                              ajax-answer-id="{{ answer.id }}">
                                            {% csrf_token %}
                                            <textarea class="answers" name="amendment">{{ answer.amendment }}</textarea>
                                            <input type="hidden" name="answer_pk" value="{{ answer.pk }}">
                                            <button class="btn btn-default btn-bottom" type="submit">Update</button>
                                            <label class="hint"></label>
                                        </form>
                                    {% endif %}
                                </div>

                                <div class="form1">
                                    <header class="panel-heading">Score&Comment</header>
                                    <h4>score: {{ answer.score }}</h4>
                                    <h4>teacher's comments</h4>
                                    <p>{% if answer.comment %} {{ answer.comment }} {% endif %}</p>
                                </div>
                                {% endwith %}
                                <!-- <button class="btn btn-default" id="{{ forloop.counter }}">next</button> -->

                            </div><!--end div exambor-->
                            {% empty %}
                            <p>This exam has no problems yet.</p>
                        {% endfor %}

                    {% endif %}

                </div>
            </div>

        </section>
    </section>
{% endblock content %}

{% block javascripts %}
    {{ block.super }}
    <script type="text/javascript">
        $.py = {};
        $.py.is_exam_ended = ("{{ is_exam_ended }}" == "True");
        $.py.exam_id = {{ exam.id }};
        $.py.student_id = {{ request.user.id }};
        $.py.current_user = {{ request.user.id }};
    </script>
    <script type="text/javascript" src="{% static "js/moment.js" %}"></script>
    <script type = "text/javascript" src = "{% static "laioffer/js/csrf.js" %}" ></script>
    {% if is_exam_ended %}
        <link href = "{% static "code-prettify/prettify.css" %}" rel = "stylesheet" type = "text/css">
        <script src = "{% static "code-prettify/prettify.js" %}" type = "text/javascript" ></script>
    {% endif %}
    <script type="text/javascript" src="{% static "laioffer/js/inlinecomment.js" %}"></script>
    <script type="text/javascript" src="{% static "laioffer/js/exam.js" %}"></script>
{% endblock javascripts %}

